<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/axios.min.js"></script>
    <script src="js/vue.min.js"></script>
    <style>
        span{color: red}
    </style>
</head>
<body>
主页
<form action="register.do" method="post">
    账号: <input v-model="user.name"><span>{{showError("name")}}</span><br>
    密码: <input v-model="user.pwd"><span>{{showError("pwd")}}</span><br>
    性别: <input v-model="user.isBoy" value="true" type="radio">男孩
         <input v-model="user.isBoy" value="false" type="radio">女孩
         <span>{{showError("isBoy")}}</span><br>
    年龄: <input v-model="user.age" type="range"><span>{{showError("age")}}</span><br>
    电话: <input v-model="user.phone" type="number"><span>{{showError("phone")}}</span><br>
    邮箱: <input v-model="user.email" type="email"><span>{{showError("email")}}</span><br>
    <img id="img" alt="用户头像" width="200px" height="300px"><br>
    <input id="head" type="file" v-model="user.head" @change="upload"><br>
    生日: <input v-model="user.birthday" type="date"><br>
    注册: <input v-model="user.regtime" type="datetime-local"><br>
    <button @click.prevent="reg">注册</button>
</form>

<script>
    var v = new Vue({
        el : "form",
        data : {
            user : {},
            errors : []
        },
        methods : {
            upload(){
                let url = "upload.do"
                let params = new FormData();
                let file = document.getElementById("head");
                params.append("head", file.files[0])
                axios.post(url, params).then(res=>{
                    if(res.data.code == 1){
                        img.src = res.data.data; // webpath
                    }
                });
            },
            reg(){
                let url = "register.do";
                let params = new URLSearchParams();
                for (let name in this.user) {
                    params.append(name, this.user[name]);
                }
                axios.post(url,params).then(res=>{
                    this.errors =  res.data.code ? [] : res.data.data;
                })
            },
            showError(name){
                let ret = "";
                this.errors.forEach(e=>{
                    if(e.field == name){
                        if(ret!=''){
                            ret += "；";
                        }
                        ret += e.defaultMessage;
                    }
                })
                return ret;
            },
        }
    })
</script>

</body>
</html>